<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="content">
                    <div class="title">
                        <span>{{$route.query.title}}</span>
                        <i class="el-icon-close" @click="$router.go(-1)"></i>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules" class="form">
                        <el-form-item label="角色" prop="role_id" style="width:224px">
                            <el-select v-model="form.role_id" placeholder="请选择角色" style="width:100%" :disabled="$route.query.title=='详情'">
                                <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="账号" prop="username" style="width:224px">
                            <el-input v-model="form.username" placeholder="请输入账号" :readonly="$route.query.title=='详情'"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="realname" style="width:224px">
                            <el-input v-model="form.realname" placeholder="请输入姓名" :readonly="$route.query.title=='详情'"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile" style="width:224px">
                            <el-input v-model="form.mobile" placeholder="请输入手机号" :maxLength='11' :readonly="$route.query.title=='详情'"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password" style="width:224px" v-if="$route.query.title!='详情'">
                            <el-input v-model="form.password" placeholder="请输入密码" :readonly="$route.query.title=='详情'" type="password" show-password></el-input>
                        </el-form-item>
                    </el-form>
                    <div v-if="$route.query.title!='详情'">
                        <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                        <el-button style="width:143px" @click="$router.go(-1)">取消</el-button>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>

export default {
    data() {
        var phone = (rule, value, callback) => {
            let phoneReg = this.$Reg.phone;
            if (value && !phoneReg.test(value)) {
                callback(new Error("请输入正确的公司电话"));
            } else if (!value) {
                callback(new Error("请输入公司电话"));
            } else {
                callback();
            }
        }
        var password = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入密码'));
            } else if (value.toString().length < 6 || value.toString().length > 20) {
                callback(new Error('密码长度为6 - 20个字符'))
            } else {
                callback();
            }
        };
        return {
            form: {
                role_id: '',
                username: '',
                realname: '',//91310000MA1H3BEG0P
                mobile: '',
                id: '',
                password: ''
            },
            rules: {
                role_id: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                realname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, validator: phone, trigger: 'blur' },
                ],
                password: [
                    { required: true, validator: password, trigger: 'blur' },
                ],
            },
            roleList: []
        }
    },
    created() {
        this.$route.meta.title = this.$route.query.title
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            this.getDetail()
        }

    },
    mounted() {
        this.gerRoleList()
    },
    methods: {
        async gerRoleList() {
            let res = await this.$Http.roleList({ isAll: 1 })
            if (res.status == 1) {
                this.roleList = res.data.data || []
            }
        },
        async getDetail() {
            // let res = await this.$Http.getUserInfo({ id: this.form.id })
            // if (res.status == 1) {
            //     this.form = res.data
            //     this.form.password = ''
            // }
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setUserInfo(this.form)
                    if (res.status == 1) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        padding: 30px;
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
        }
        .content {
            width: 517px;
            height: 100%;
            .title {
                height: 65px;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383b40;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-icon-close {
                    cursor: pointer;
                }
            }
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
</style>